import { useEffect, useState } from 'react'
import { useSpring, SpringRef } from 'react-spring'

/**
 * transform 属性
 *  none	定义不进行转换。	
    matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。	
    translate(x,y)	定义 2D 转换。	
    translate3d(x,y,z)	定义 3D 转换。	
    translateX(x)	定义转换，只是用 X 轴的值。	
    translateY(y)	定义转换，只是用 Y 轴的值。	
    translateZ(z)	定义 3D 转换，只是用 Z 轴的值。	
    scale(x,y)	定义 2D 缩放转换。	
    scale3d(x,y,z)	定义 3D 缩放转换。	
    scaleX(x)	通过设置 X 轴的值来定义缩放转换。	
    scaleY(y)	通过设置 Y 轴的值来定义缩放转换。	
    scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。	
    rotate(angle)	定义 2D 旋转，在参数中规定角度。	
    rotate3d(x,y,z,angle)	定义 3D 旋转。	
    rotateX(angle)	定义沿着 X 轴的 3D 旋转。	
    rotateY(angle)	定义沿着 Y 轴的 3D 旋转。	
    rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。	
    skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。	
    skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。	
    skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。	
    perspective(n)	为 3D 转换元素定义透视视图。
 */
export interface ScaleProps {
    x?: number;
    y?: number;
    z?: number;
    scale?: number;
    rotateX?: number;
    rotateY?: number;
    rotateZ?: number;
    rotate?: number;
    start?: boolean;
    [key: string]: any;
}

const defaultProps: ScaleProps = {
    x: 0,
    y: 0,
    z: 0,
    scale: 1,
    rotateX: 0,
    rotateY: 0,
    rotateZ: 0,
    rotate: 0,
    // 控制是否初始化即触发
    start: false
}
/**
 * 调用api方法控制动画效果
 * @param props  scale
 * @returns 
 */
export default function useScale(props = defaultProps) {
    // 状态更新会造成当前组件重新渲染，所以尽量控制在最小粒度改变数据
    const [state, setState] = useState<ScaleProps>(props);
    const [styles, api] = useSpring<ScaleProps>(() => (defaultProps));
    // 当外界修改state时hooks会重新触发，useEffect依赖props也会触发函数，这个可能和useState参数是props相关
    useEffect(() => {
        // 这个api要做这个断言，直接调用会报错
        (api as SpringRef).start(state);
    }, [props]);
    /**
     * 这里返回值setState，直接返回使用会报错，有两种解决方案
     * 1. 使用的时候做个判断 typeof setState === 'function' && setStyles({ y: 10, scale: 2 });
     * 2. 返回值  as const; 做这个断言
     */
    return [styles, setState] as const;
}